/**
 * 用户管理页面的JavaScript功能
 */

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 检查用户权限
    checkAdminPermission();
    
    // 初始化侧边栏
    initSidebar();
    
    // 初始化筛选功能
    initFilters();
    
    // 初始化搜索功能
    initSearch();
    
    // 初始化表格交互
    initTableActions();
    
    // 初始化分页功能
    initPagination();
    
    // 初始化批量操作
    initBatchOperations();
});

/**
 * 检查用户是否有管理员权限
 */
function checkAdminPermission() {
    // 获取用户信息
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || 'null');
    
    // 如果用户未登录或不是管理员，重定向到登录页
    if (!userInfo || !userInfo.isAdmin) {
        window.utils.showNotification('您没有管理员权限，请使用管理员账号登录', 'error');
        setTimeout(() => {
            window.location.href = '../login.html';
        }, 2000);
    }
}

/**
 * 初始化侧边栏
 */
function initSidebar() {
    // 获取当前页面路径
    const currentPath = window.location.pathname.split('/').pop() || 'dashboard.html';
    
    // 设置当前页面的侧边栏项为激活状态
    const sidebarItems = document.querySelectorAll('.admin-sidebar-item');
    sidebarItems.forEach(item => {
        const link = item.querySelector('a');
        const linkPath = link.getAttribute('href');
        if (linkPath === currentPath) {
            item.classList.add('active');
        } else {
            item.classList.remove('active');
        }
    });
    
    // 获取用户信息并更新侧边栏用户信息
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || 'null');
    if (userInfo) {
        const usernameElement = document.querySelector('.admin-username');
        if (usernameElement) {
            usernameElement.textContent = userInfo.username || '管理员';
        }
    }
}

/**
 * 初始化筛选功能
 */
function initFilters() {
    const filterSelects = document.querySelectorAll('.filter-select');
    filterSelects.forEach(select => {
        select.addEventListener('change', function() {
            // 执行筛选逻辑
            filterUsers();
        });
    });
}

/**
 * 根据筛选条件过滤用户列表
 */
function filterUsers() {
    // 获取筛选条件
    const roleFilter = document.querySelector('.filter-select:nth-child(1)').value;
    const statusFilter = document.querySelector('.filter-select:nth-child(2)').value;
    const timeFilter = document.querySelector('.filter-select:nth-child(3)').value;
    
    // 获取所有用户行
    const rows = document.querySelectorAll('.admin-table tbody tr');
    
    // 遍历每一行，根据筛选条件显示或隐藏
    rows.forEach(row => {
        const role = row.querySelector('td:nth-child(3)').textContent.trim();
        const status = row.querySelector('.status-badge').textContent.trim();
        const date = row.querySelector('td:nth-child(5)').textContent.trim();
        
        // 判断是否符合筛选条件
        const matchRole = roleFilter === '所有用户' || role === roleFilter;
        const matchStatus = statusFilter === '所有状态' || status === statusFilter;
        const matchTime = timeFilter === '注册时间' || matchTimeFilter(date, timeFilter);
        
        // 显示或隐藏行
        if (matchRole && matchStatus && matchTime) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
    
    // 更新分页
    updatePagination();
}

/**
 * 判断日期是否符合时间筛选条件
 * @param {string} dateStr - 日期字符串
 * @param {string} filter - 筛选条件
 * @returns {boolean} 是否符合条件
 */
function matchTimeFilter(dateStr, filter) {
    const date = new Date(dateStr);
    const now = new Date();
    
    // 根据筛选条件判断
    switch (filter) {
        case '最近注册':
            // 最近一个月注册的用户
            const oneMonthAgo = new Date();
            oneMonthAgo.setMonth(now.getMonth() - 1);
            return date >= oneMonthAgo;
        case '最早注册':
            // 一个月前注册的用户
            const oneMonthAgo2 = new Date();
            oneMonthAgo2.setMonth(now.getMonth() - 1);
            return date < oneMonthAgo2;
        default:
            return true;
    }
}

/**
 * 初始化搜索功能
 */
function initSearch() {
    const searchInput = document.getElementById('user-search-input');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const rows = document.querySelectorAll('.admin-table tbody tr');
            
            rows.forEach(row => {
                const userName = row.querySelector('.user-name').textContent.toLowerCase();
                const userId = row.querySelector('.user-id').textContent.toLowerCase();
                const email = row.querySelector('td:nth-child(4)').textContent.toLowerCase();
                
                // 如果搜索词匹配用户名、ID或邮箱，则显示该行
                if (userName.includes(searchTerm) || userId.includes(searchTerm) || email.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
            
            // 更新分页
            updatePagination();
        });
    }
}

/**
 * 初始化表格交互
 */
function initTableActions() {
    // 下拉菜单交互
    const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
    
    dropdownToggles.forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            e.stopPropagation();
            const dropdown = this.nextElementSibling;
            
            // 关闭所有其他下拉菜单
            document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
                if (menu !== dropdown) {
                    menu.classList.remove('show');
                }
            });
            
            // 切换当前下拉菜单
            dropdown.classList.toggle('show');
        });
    });
    
    // 点击页面其他地方关闭下拉菜单
    document.addEventListener('click', function() {
        document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
            menu.classList.remove('show');
        });
    });
    
    // 绑定用户操作事件
    bindUserActions();
}

/**
 * 绑定用户操作事件
 */
function bindUserActions() {
    // 查看用户详情
    document.querySelectorAll('.btn-icon[title="查看详情"]').forEach(btn => {
        btn.addEventListener('click', function() {
            const row = this.closest('tr');
            const userName = row.querySelector('.user-name').textContent;
            const userId = row.querySelector('.user-id').textContent.replace('ID: ', '');
            showUserDetails(userName, userId, row);
        });
    });
    
    // 编辑用户信息
    document.querySelectorAll('.btn-icon[title="编辑"]').forEach(btn => {
        btn.addEventListener('click', function() {
            const row = this.closest('tr');
            const userName = row.querySelector('.user-name').textContent;
            const userId = row.querySelector('.user-id').textContent.replace('ID: ', '');
            editUser(userName, userId, row);
        });
    });
    
    // 禁用账号 - 修复:has选择器
    document.querySelectorAll('.dropdown-item').forEach(item => {
        const icon = item.querySelector('i.bi-lock');
        if (icon) {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const row = this.closest('tr');
                const userName = row.querySelector('.user-name').textContent;
                disableUser(userName, row);
            });
        }
    });
    
    // 启用账号 - 修复:has选择器
    document.querySelectorAll('.dropdown-item').forEach(item => {
        const icon = item.querySelector('i.bi-unlock');
        if (icon) {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const row = this.closest('tr');
                const userName = row.querySelector('.user-name').textContent;
                enableUser(userName, row);
            });
        }
    });
    
    // 激活账号 - 修复:has选择器
    document.querySelectorAll('.dropdown-item').forEach(item => {
        const icon = item.querySelector('i.bi-check-circle');
        if (icon) {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const row = this.closest('tr');
                const userName = row.querySelector('.user-name').textContent;
                activateUser(userName, row);
            });
        }
    });
    
    // 发送消息 - 修复:has选择器
    document.querySelectorAll('.dropdown-item').forEach(item => {
        const icon = item.querySelector('i.bi-envelope');
        if (icon) {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const row = this.closest('tr');
                const userName = row.querySelector('.user-name').textContent;
                sendMessage(userName);
            });
        }
    });
    
    // 删除用户 - 修复:has选择器
    document.querySelectorAll('.dropdown-item').forEach(item => {
        const icon = item.querySelector('i.bi-trash');
        if (icon) {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const row = this.closest('tr');
                const userName = row.querySelector('.user-name').textContent;
                deleteUser(userName, row);
            });
        }
    });
}

/**
 * 显示用户详情
 * @param {string} userName - 用户名
 * @param {string} userId - 用户ID
 * @param {HTMLElement} row - 表格行元素
 */
function showUserDetails(userName, userId, row) {
    // 创建模态框显示详情
    window.utils.createModal({
        title: '用户详情',
        content: `
            <div class="user-details">
                <div class="user-details-header">
                    <img src="../../static/avatar-default.png" alt="${userName}的头像" class="user-avatar-lg">
                    <div>
                        <h3>${userName}</h3>
                        <p>ID: ${userId}</p>
                    </div>
                </div>
                <div class="user-details-info">
                    <div class="detail-item">
                        <div class="detail-label">角色：</div>
                        <div class="detail-value">${row.querySelector('td:nth-child(3)').textContent}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">邮箱：</div>
                        <div class="detail-value">${row.querySelector('td:nth-child(4)').textContent}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">注册时间：</div>
                        <div class="detail-value">${row.querySelector('td:nth-child(5)').textContent}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">状态：</div>
                        <div class="detail-value">${row.querySelector('.status-badge').textContent}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">手机号码：</div>
                        <div class="detail-value">138****1234</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">所在地区：</div>
                        <div class="detail-value">北京市海淀区</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">最近登录：</div>
                        <div class="detail-value">2023-09-20 14:30:45</div>
                    </div>
                </div>
                <div class="user-details-actions">
                    <button class="btn btn-primary" onclick="editUser('${userName}', '${userId}', null)">编辑用户</button>
                    <button class="btn btn-secondary" onclick="sendMessage('${userName}')">发送消息</button>
                </div>
            </div>
        `
    });
}

/**
 * 编辑用户信息
 * @param {string} userName - 用户名
 * @param {string} userId - 用户ID
 * @param {HTMLElement} row - 表格行元素
 */
function editUser(userName, userId, row) {
    // 获取用户当前信息
    let role = '';
    let email = '';
    let status = '';
    
    if (row) {
        role = row.querySelector('td:nth-child(3)').textContent;
        email = row.querySelector('td:nth-child(4)').textContent;
        status = row.querySelector('.status-badge').textContent;
    }
    
    // 创建编辑模态框
    window.utils.createModal({
        title: '编辑用户',
        content: `
            <form id="edit-user-form">
                <div class="form-group">
                    <label for="edit-username">用户名</label>
                    <input type="text" id="edit-username" class="form-control" value="${userName}">
                </div>
                <div class="form-group">
                    <label for="edit-email">邮箱</label>
                    <input type="email" id="edit-email" class="form-control" value="${email}">
                </div>
                <div class="form-group">
                    <label for="edit-role">角色</label>
                    <select id="edit-role" class="form-control">
                        <option ${role === '学生' ? 'selected' : ''}>学生</option>
                        <option ${role === '教师' ? 'selected' : ''}>教师</option>
                        <option ${role === '志愿者' ? 'selected' : ''}>志愿者</option>
                        <option ${role === '管理员' ? 'selected' : ''}>管理员</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-status">状态</label>
                    <select id="edit-status" class="form-control">
                        <option ${status === '活跃' ? 'selected' : ''}>活跃</option>
                        <option ${status === '未激活' ? 'selected' : ''}>未激活</option>
                        <option ${status === '已禁用' ? 'selected' : ''}>已禁用</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-phone">手机号码</label>
                    <input type="text" id="edit-phone" class="form-control" value="13800138000">
                </div>
                <div class="form-group">
                    <label for="edit-location">所在地区</label>
                    <input type="text" id="edit-location" class="form-control" value="北京市海淀区">
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="window.utils.closeModal()">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveUserEdit('${userId}')">保存</button>
                </div>
            </form>
        `
    });
}

/**
 * 保存用户编辑
 * @param {string} userId - 用户ID
 */
function saveUserEdit(userId) {
    // 获取表单数据
    const username = document.getElementById('edit-username').value;
    const email = document.getElementById('edit-email').value;
    const role = document.getElementById('edit-role').value;
    const status = document.getElementById('edit-status').value;
    
    // 验证表单数据
    if (!username || !email) {
        window.utils.showNotification('用户名和邮箱不能为空', 'error');
        return;
    }
    
    // 模拟保存操作
    // 实际项目中应该发送AJAX请求到服务器
    setTimeout(() => {
        // 更新表格中的用户信息 - 使用更兼容的方式
        let row = null;
        const userIdElements = document.querySelectorAll('.user-id');
        for (let i = 0; i < userIdElements.length; i++) {
            if (userIdElements[i].textContent === `ID: ${userId}`) {
                row = userIdElements[i].closest('tr');
                break;
            }
        }
        if (row) {
            row.querySelector('.user-name').textContent = username;
            row.querySelector('td:nth-child(3)').textContent = role;
            row.querySelector('td:nth-child(4)').textContent = email;
            
            const statusBadge = row.querySelector('.status-badge');
            statusBadge.textContent = status;
            
            // 更新状态样式
            statusBadge.className = 'status-badge';
            if (status === '活跃') {
                statusBadge.classList.add('status-active');
            } else if (status === '未激活') {
                statusBadge.classList.add('status-inactive');
            } else if (status === '已禁用') {
                statusBadge.classList.add('status-disabled');
            }
            
            // 更新下拉菜单选项
            const dropdown = row.querySelector('.dropdown-menu');
            if (status === '活跃') {
                dropdown.innerHTML = `
                    <a href="#" class="dropdown-item">
                        <i class="bi bi-lock"></i> 禁用账号
                    </a>
                    <a href="#" class="dropdown-item">
                        <i class="bi bi-envelope"></i> 发送消息
                    </a>
                    <a href="#" class="dropdown-item text-danger">
                        <i class="bi bi-trash"></i> 删除用户
                    </a>
                `;
            } else if (status === '未激活') {
                dropdown.innerHTML = `
                    <a href="#" class="dropdown-item">
                        <i class="bi bi-check-circle"></i> 激活账号
                    </a>
                    <a href="#" class="dropdown-item">
                        <i class="bi bi-envelope"></i> 发送消息
                    </a>
                    <a href="#" class="dropdown-item text-danger">
                        <i class="bi bi-trash"></i> 删除用户
                    </a>
                `;
            } else if (status === '已禁用') {
                dropdown.innerHTML = `
                    <a href="#" class="dropdown-item">
                        <i class="bi bi-unlock"></i> 启用账号
                    </a>
                    <a href="#" class="dropdown-item">
                        <i class="bi bi-envelope"></i> 发送消息
                    </a>
                    <a href="#" class="dropdown-item text-danger">
                        <i class="bi bi-trash"></i> 删除用户
                    </a>
                `;
            }
            
            // 重新绑定事件
            bindUserActions();
        }
        
        // 关闭模态框
        window.utils.closeModal();
        
        // 显示成功通知
        window.utils.showNotification(`用户 ${username} 的信息已更新`, 'success');
    }, 500);
}

/**
 * 禁用用户账号
 * @param {string} userName - 用户名
 * @param {HTMLElement} row - 表格行元素
 */
function disableUser(userName, row) {
    window.utils.showConfirm(
        `确定要禁用 ${userName} 的账号吗？`,
        function() {
            // 更新状态标识
            const statusBadge = row.querySelector('.status-badge');
            statusBadge.className = 'status-badge status-disabled';
            statusBadge.textContent = '已禁用';
            
            // 更新下拉菜单选项
            const dropdown = row.querySelector('.dropdown-menu');
            dropdown.innerHTML = `
                <a href="#" class="dropdown-item">
                    <i class="bi bi-unlock"></i> 启用账号
                </a>
                <a href="#" class="dropdown-item">
                    <i class="bi bi-envelope"></i> 发送消息
                </a>
                <a href="#" class="dropdown-item text-danger">
                    <i class="bi bi-trash"></i> 删除用户
                </a>
            `;
            
            // 重新绑定事件
            bindUserActions();
            
            // 显示成功通知
            window.utils.showNotification(`已禁用 ${userName} 的账号`, 'success');
        }
    );
}

/**
 * 启用用户账号
 * @param {string} userName - 用户名
 * @param {HTMLElement} row - 表格行元素
 */
function enableUser(userName, row) {
    window.utils.showConfirm(
        `确定要启用 ${userName} 的账号吗？`,
        function() {
            // 更新状态标识
            const statusBadge = row.querySelector('.status-badge');
            statusBadge.className = 'status-badge status-active';
            statusBadge.textContent = '活跃';
            
            // 更新下拉菜单选项
            const dropdown = row.querySelector('.dropdown-menu');
            dropdown.innerHTML = `
                <a href="#" class="dropdown-item">
                    <i class="bi bi-lock"></i> 禁用账号
                </a>
                <a href="#" class="dropdown-item">
                    <i class="bi bi-envelope"></i> 发送消息
                </a>
                <a href="#" class="dropdown-item text-danger">
                    <i class="bi bi-trash"></i> 删除用户
                </a>
            `;
            
            // 重新绑定事件
            bindUserActions();
            
            // 显示成功通知
            window.utils.showNotification(`已启用 ${userName} 的账号`, 'success');
        }
    );
}

/**
 * 激活用户账号
 * @param {string} userName - 用户名
 * @param {HTMLElement} row - 表格行元素
 */
function activateUser(userName, row) {
    window.utils.showConfirm(
        `确定要激活 ${userName} 的账号吗？`,
        function() {
            // 更新状态标识
            const statusBadge = row.querySelector('.status-badge');
            statusBadge.className = 'status-badge status-active';
            statusBadge.textContent = '活跃';
            
            // 更新下拉菜单选项
            const dropdown = row.querySelector('.dropdown-menu');
            dropdown.innerHTML = `
                <a href="#" class="dropdown-item">
                    <i class="bi bi-lock"></i> 禁用账号
                </a>
                <a href="#" class="dropdown-item">
                    <i class="bi bi-envelope"></i> 发送消息
                </a>
                <a href="#" class="dropdown-item text-danger">
                    <i class="bi bi-trash"></i> 删除用户
                </a>
            `;
            
            // 重新绑定事件
            bindUserActions();
            
            // 显示成功通知
            window.utils.showNotification(`已激活 ${userName} 的账号`, 'success');
        }
    );
}

/**
 * 发送消息给用户
 * @param {string} userName - 用户名
 */
function sendMessage(userName) {
    // 创建发送消息模态框
    window.utils.createModal({
        title: `发送消息给 ${userName}`,
        content: `
            <form id="send-message-form">
                <div class="form-group">
                    <label for="message-subject">主题</label>
                    <input type="text" id="message-subject" class="form-control" placeholder="请输入消息主题">
                </div>
                <div class="form-group">
                    <label for="message-content">内容</label>
                    <textarea id="message-content" class="form-control" rows="5" placeholder="请输入消息内容"></textarea>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="window.utils.closeModal()">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitMessage('${userName}')">发送</button>
                </div>
            </form>
        `
    });
}

/**
 * 提交消息
 * @param {string} userName - 用户名
 */
function submitMessage(userName) {
    // 获取表单数据
    const subject = document.getElementById('message-subject').value;
    const content = document.getElementById('message-content').value;
    
    // 验证表单数据
    if (!subject || !content) {
        window.utils.showNotification('主题和内容不能为空', 'error');
        return;
    }
    
    // 模拟发送操作
    // 实际项目中应该发送AJAX请求到服务器
    setTimeout(() => {
        // 关闭模态框
        window.utils.closeModal();
        
        // 显示成功通知
        window.utils.showNotification(`消息已发送给 ${userName}`, 'success');
    }, 500);
}

/**
 * 删除用户
 * @param {string} userName - 用户名
 * @param {HTMLElement} row - 表格行元素
 */
function deleteUser(userName, row) {
    window.utils.showConfirm(
        `确定要删除用户 ${userName} 吗？此操作不可恢复！`,
        function() {
            // 模拟删除操作
            // 实际项目中应该发送AJAX请求到服务器
            row.style.opacity = '0.5';
            setTimeout(() => {
                row.remove();
                
                // 显示成功通知
                window.utils.showNotification(`用户 ${userName} 已删除`, 'success');
                
                // 更新分页
                updatePagination();
            }, 500);
        }
    );
}

/**
 * 初始化分页功能
 */
function initPagination() {
    const pageItems = document.querySelectorAll('.page-item');
    pageItems.forEach(item => {
        item.addEventListener('click', function() {
            // 如果是上一页或下一页按钮，则特殊处理
            if (this.querySelector('.bi-chevron-left') || this.querySelector('.bi-chevron-right')) {
                handlePaginationArrows(this);
                return;
            }
            
            // 移除所有分页项的active类
            pageItems.forEach(p => p.classList.remove('active'));
            
            // 给当前分页项添加active类
            this.classList.add('active');
            
            // 加载对应页面的数据
            loadPage(this.textContent);
        });
    });
}

